<template>
	<view class="ht">
		<view class="title">
			<span>成绩证书上传 </span><span class="title_r">请选择文件上传、限制每个2MB以内。</span>
		</view>
		<!-- 上传图片的地方 -->
		<view class="uppic" @tap="upPic" v-if="!img">
			<!-- <image class="gradepic" :src="$img_src + img" mode=""></image> -->
			<view class="uppic_jia">
			</view>
		</view>
		<view class="uppic_t" @tap="upPic" v-else>
			<image class="gradepic" :src="$img_src + img" mode="widthFix"></image>
			<view class="uppic_jia">
			</view>
		</view>
		<button @tap="submit()">确认上传</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: ''
			}
		},
		methods: {
			submit(){
				// if(!this.img)return this.toast('请先上传图片');
				// this.ajax('flag/addFlag',{
				// 	data:{img : this.img},
				// 	success:(res) => {
				// 		this.toast(res.msg);
				// 		if(res.code) {
				// 			setTimeout(()=>{
				// 				uni.navigateBack();
				// 			},1000)
				// 		}
				// 	}
				// })
				if(!this.img)  return this.toast('请先上传图片')
				this.ajax('flag/addFlag' , {
					data:{img : this.img},
					success:(res) => {
						this.toast(res.msg);
						if(res.code) {
							setTimeout( () => {
								uni.navigateBack();
							},1000)
						}
					}
				})
			},
			upPic() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res)  => {
						// console.log(JSON.stringify(res.tempFilePaths));
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title:'正在上传图片'
						}),
						uni.getImageInfo({
							src : tempFilePaths[0],
							success:(res) => {
								let canvasWidth = res.width //图片原始长宽
								let canvasHeight = res.height
								let img = new Image()
								img.src = res.path
								let canvas = document.createElement('canvas');
								let ctx = canvas.getContext('2d')
								
								var width = canvasWidth;
								var height = canvasHeight;
								this.width_temp = width;
								this.height_temp = height;
								var len = canvasHeight / canvasWidth;
								
								if(height > 700) {
									height = 700;
								    width = height / len;
								}
								
								canvas.width = width;
								canvas.height = height;
								ctx.drawImage(img, 0, 0, width, height)
								canvas.toBlob((fileSrc) => {
									let imgSrc = window.URL.createObjectURL(fileSrc)
									console.log('压缩后', imgSrc)
									uni.uploadFile({
										url: '/phone/flag/upFlagImg', //仅为示例，非真实的接口地址
										filePath: imgSrc,
										name: 'file',
										header: {
											'x-requested-with': 'XMLHttpRequest', //自定义请求头信息
										},
										formData: {
											'user': 'test'
										},
										success: (uploadFileRes) => {
											var res = JSON.parse(uploadFileRes.data);
											var url = res.msg;
											if( canvasWidth > canvasHeight ) url =  url+'?x-oss-process=image/rotate,90';
											this.img = url;
											console.log(res);
											uni.hideLoading();
										}
									});
									return false;
								})
							}
						})
					}
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.ht {
		padding: 40upx 32upx;

		.title {
			font-size: 28upx;
			color: #333333;
			font-weight: bold;

			.title_r {
				margin-left: 10upx;
				font-size: 20upx;
				color: #E1E1E1;
				font-weight: 400;
			}
		}

		.uppic {
			width: 690upx;
			height: 350upx;
			background: rgba(249, 249, 249, 1);
			border-radius: 3px;
			border: #F9F9F9;
			margin-top: 40upx;
			position: relative;
			.gradepic {
				width: 100%;
				// height: 100%;
			}

			.uppic_jia {
				width: 68upx;
				height: 68upx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: url('../../static/image/grade/jia02.png') no-repeat;
				background-size: 100%;
			}
		}

.uppic_t {
	width: 690upx;
	background: rgba(249, 249, 249, 1);
	border-radius: 3px;
	border: #F9F9F9;
	margin-top: 40upx;
	position: relative;
	
	.gradepic {
		width: 100%;
		// height: 100%;
	}
	.uppic_jia {
		width: 68upx;
		height: 68upx;
		background-color: #007AFF;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: url('../../static/image/grade/jia02.png') no-repeat;
		background-size: 100%;
	}
}
		button {
			width: 614upx;
			height: 98upx;
			background-color: #000000;
			color: #FFFFFF;
			margin-top: 70upx;
			font-size: 32upx;
			line-height: 98upx;
		}
	}
</style>
